import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-panels',
  templateUrl: './panels.component.html',
  styleUrls: ['./panels.component.scss']
})
export class PanelsComponent implements OnInit {
  horizontalTabs = [];
  horizontalTabsContent = '';
  verticalTabs = [];
  verticalTabsContent = '';
  collapsibleAccordionTabs = [];
  iconsVerticalTabs = [];
  iconsVerticalTabsContent = '';
  pageSubcategoriesTabs = [];
  pageSubcategoriesTabsTitle = '';
  pageSubcategoriesTabsCategory = '';
  pageSubcategoriesTabsContent = '';

  constructor() {
  }

  horizontalTabsChange(target, key) {
    target.forEach(function (value) {
      value.isActive = false;
    });
    target[key].isActive = !target[key].isActive;
    this.horizontalTabsContent = target[key].content;
  }

  verticalTabsChange(target, key) {
    target.forEach(function (value) {
      value.isActive = false;
    });
    target[key].isActive = !target[key].isActive;
    this.verticalTabsContent = target[key].content;
  }

  collapsibleAccordionTabsChange(target, key) {
    target.forEach(function (value) {
      value.isActive = false;
    });
    target[key].isActive = !target[key].isActive;
  }

  iconsVerticalTabsChange (target, key) {
    target.forEach(function (value) {
      value.isActive = false;
    });
    target[key].isActive = !target[key].isActive;
    this.iconsVerticalTabsContent = target[key].content;
  }

  pageSubcategoriesTabsChange (target, key) {
    target.forEach(function (value) {
      value.isActive = false;
    });
    target[key].isActive = !target[key].isActive;
    this.pageSubcategoriesTabsTitle = target[key].title;
    this.pageSubcategoriesTabsCategory = target[key].category;
    this.pageSubcategoriesTabsContent = target[key].content;
  }

  ngOnInit() {
    this.horizontalTabs = [
      {
        'name': 'PROFILE',
        'isActive': true,
        'content': 'PROFILE CONTENT'
      },
      {
        'name': 'SETTINGS',
        'isActive': false,
        'content': 'SETTINGS CONTENT'
      },
      {
        'name': 'OPTIONS',
        'isActive': false,
        'content': 'OPTIONS CONTENT'
      }
    ];
    this.horizontalTabsContent = this.horizontalTabs[0]['content'];
    this.verticalTabs = [
      {
        'name': 'PROFILE',
        'isActive': true,
        'content': 'PROFILE CONTENT'
      },
      {
        'name': 'SETTINGS',
        'isActive': false,
        'content': 'SETTINGS CONTENT'
      },
      {
        'name': 'OPTIONS',
        'isActive': false,
        'content': 'OPTIONS CONTENT'
      }
    ];
    this.verticalTabsContent = this.verticalTabs[0]['content'];
    this.collapsibleAccordionTabs = [
      {
        'name': 'Collapsible Group Item #1',
        'isActive': true,
        'content': 'Collapsible Group Item #1 Content'
      },
      {
        'name': 'Collapsible Group Item #2',
        'isActive': false,
        'content': 'Collapsible Group Item #2 Content'
      },
      {
        'name': 'Collapsible Group Item #3',
        'isActive': false,
        'content': 'Collapsible Group Item #3 Content'
      }
    ];
    this.iconsVerticalTabs = [
      {
        'name': 'DASHBOARD',
        'icon': 'fa-dashboard',
        'isActive': true,
        'content': 'Collaboratively administrate empowered markets via plug-and-play networks.'
      },
      {
        'name': 'SCHEDULE',
        'icon': 'fa-calendar',
        'isActive': false,
        'content': 'Collapsible Group Item #2 Content'
      }
    ];
    this.iconsVerticalTabsContent = this.iconsVerticalTabs[0]['content'];
    this.pageSubcategoriesTabs = [
      {
        'name': 'Description',
        'icon': 'fa-info',
        'isActive': true,
        'title': 'Description about product',
        'category': 'More information here',
        'content': 'Description Content'
      },
      {
        'name': 'Location',
        'icon': 'fa-location-arrow',
        'isActive': false,
        'title': 'Location of the product',
        'category': 'More information here',
        'content': 'Location Content'
      },
      {
        'name': 'Legal Info',
        'icon': 'fa-fighter-jet',
        'isActive': false,
        'title': 'Legal info of the product',
        'category': 'More information here',
        'content': 'Legal info Content'
      },
      {
        'name': 'Help Center',
        'icon': 'fa-question',
        'isActive': false,
        'title': 'Help center',
        'category': 'More information here',
        'content': 'Help center Content'
      },
    ];
    this.pageSubcategoriesTabsTitle = this.pageSubcategoriesTabs[0]['title'];
    this.pageSubcategoriesTabsCategory = this.pageSubcategoriesTabs[0]['category'];
    this.pageSubcategoriesTabsContent = this.pageSubcategoriesTabs[0]['content'];
  }
}
